<template>
  <div>
    <canvas width="400" height="200"></canvas>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, nextTick } from "vue"
const state = reactive({
  lotteryImg: null, // 奖品图片
  mousedown: false, // 鼠标是否按下
  canvas:null,
  ctx: null, // canvas的上下文对象
  startX:0,
  startY:0,
  successUrl:'https://www.kkkk1000.com/images/globalCompositeOperation/bg3.jpg',
  failUrl:'https://img95.699pic.com/element/40064/6818.png_300.png',
})

onMounted(() => {
  nextTick(() => {
    state.canvas = document.querySelector('canvas');
    state.lotteryImg = new Image();
    state.lotteryImg.src = Math.floor(Math.random() * 2) ? state.successUrl : state.failUrl;
    // 监听图片的加载完成事件
    state.lotteryImg.addEventListener('load', handleImgLoaded)
    // 移动端触摸事件
    // state.canvas.addEventListener('touchstart', eventDown);
    // state.canvas.addEventListener('touchend', eventUp);
    // state.canvas.addEventListener('touchmove', eventMove);
    // 网页版触摸事件
    state.canvas.addEventListener('mousedown', eventDown);
    state.canvas.addEventListener('mouseup', eventUp);
    state.canvas.addEventListener('mousemove', eventMove);
  })
})

const handleImgLoaded = (e) => {
  // 绘制奖品图片
  state.canvas.style.backgroundImage = 'url(' + state.lotteryImg.src + ')';
  state.canvas.style.backgroundSize = "cover"
  // 绘制灰色涂层（源图像）
  state.ctx = state.canvas.getContext('2d');
  state.ctx.fillStyle = 'gray';
  state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height)
  // 设置画的线的宽度
  state.ctx.lineWidth = 35;
  // 设置线交汇时，是圆角的
  state.ctx.lineJoin = "round";
}

// 鼠标按下
const eventDown = (e) => {
  e.preventDefault();
  state.mousedown = true;
  // 保存鼠标点击时 X坐标为，画线时，线的起点的X坐标
  state.startX = e.layerX;
  // 保存鼠标点击时 Y坐标为，画线时，线的起点的Y坐标
  state.startY = e.layerY;
  // 移动端使用下面的方法 获取 startX 和 startY
  //  state.startX = e.touches[0].clientX;
  //  state.startY = e.touches[0].clientY;
}

// 鼠标抬起
const eventUp = (e) => {
  e.preventDefault();
  state.mousedown = false;
  // 获取图片像素信息
  const data = state.ctx.getImageData(0, 0, state.canvas.width, state.canvas.height).data;
  const length = data.length;
  let k = 0;

  // 如果一个像素是透明的（值都是0），k就+1
  for (let i = 0; i < length - 3; i += 4) {
    if (data[i] == 0 && data[i + 1] == 0 && data[i + 2] == 0 && data[i + 3] == 0) {
      k++;
    }
  }

  // 当k > width*height*0.4 时，
  // 也就是说有40%的面积是透明的时，就把整个canvas的背景显示出来
  if(k>state.canvas.width*state.canvas.height*0.4){
    state.ctx.fillStyle = "blue";
    state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
  }
}

// 鼠标移动
const eventMove = (e) => {
  if (state.mousedown) {
    // 获取鼠标相对于 canvas 的坐标
    const x = e.layerX;
    const y = e.layerY;

    /* 移动端使用下面的方法 获取 x 和 y
    const x = e.touches[0].clientX;
    const y = e.touches[0].clientY;
    */
    state.ctx.globalCompositeOperation = "destination-out";

    // 开始画线
    state.ctx.beginPath();
    // 起点坐标为 startX 和 startY
    state.ctx.moveTo(state.startX, state.startY);
    // 结束的坐标为这次移动时的坐标
    state.ctx.lineTo(x, y);
    state.ctx.closePath();
    state.ctx.stroke();

    // 设置这次移动结束时的坐标，为下次开始画线时的坐标
    state.startX = x;
    state.startY = y;
  }
}
</script>

<style scoped>

</style>